<template>
    <div :class="message.msgTo===userid? 'message-box-receive':'message-box-send'">
        <div style="padding-bottom: 15px">
            <el-avatar :size="44" :src="avImg"/>

        </div>
        <div style="display: flex;flex-direction: column;padding-top: 10px;margin-left: 15px;margin-right: 15px">
            <div :class="message.msgTo===userid? 'message-wrap-receive':'message-wrap-send'">
                <AudioMessage :url="message.msgUrl" :filename="message.msgContent" v-if="message.msgType==='Audio'"/>
                <ImageMessage :url="message.msgUrl" :filename="message.msgContent" v-on="$listeners" v-bind="$attrs"
                              v-if="message.msgType==='Image'"/>
                <FileMessage :url="message.msgUrl" :filename="message.msgContent" v-if="message.msgType==='File'"/>
                <div v-if="message.msgType==='Text'">
                    {{ message.msgContent }}
                </div>

            </div>

            <div :class="message.msgTo===userid? 'message-time-receive':'message-time-send'">
                {{ formatTime(message.msgTime) }}
            </div>
        </div>


    </div>
</template>

<script>
import AudioMessage from "@/components/Chat/Message/AudioMessage";
import ImageMessage from "@/components/Chat/Message/ImageMessage";
import FileMessage from "@/components/Chat/Message/FileMessage";
import moment from "moment";

export default {
    name: "ChatMessage",
    components: {FileMessage, ImageMessage, AudioMessage},
    props: ['message'],
    data() {
        return {
            avImg: require("@/assets/icon/3.png"),
            listener: undefined,
            userid: -1,
        }
    },
    methods: {
        formatTime(time) {
            return moment(time).format("HH:mm:ss")
        }
    },
    mounted() {
        const id = this.$store.getters.getUser.id;
        this.userid = id;

    }
}
</script>

<style scoped>
.message-box-receive {
    width: 100%;
    display: flex;
    align-items: flex-end;


}

.message-box-send {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;


}

.message-wrap-receive {
    border-radius: 20px 20px 20px 0px;
    padding: 10px 20px;
    background-color: #e7f2fa;
}

.message-wrap-send {
    border-radius: 20px 20px 0px 20px;
    padding: 10px 20px;
    background-color: #f5f4f4;
}

.message-time-receive {
    margin-top: 5px;
    text-align: left;
    color: #7d808d;

}

.message-time-send {
    text-align: right;
    margin-top: 5px;
    color: #7d808d;
}
</style>